<template>
    <div class=" population-page population-page u-f">
      <div class="flex-1 p-15">
        <p style="font-family: KaiTi,serif;font-size: 16px;">
            <span style="font-size: 30px; color: black;font-weight: bold;">唐朝著名诗人关系网：</span><br><br>
            <span style="color: #007175; font-weight: bold; font-size: 20px;">绿色连接线</span>表示<span style="color: #007175; font-weight: bold; font-size: 20px;">“好友”</span>关系。<br><br>
            <span style="color: #95302e; font-weight: bold; font-size: 20px;">初唐</span>诗人里，杨炯、宋之问、杜审言都是好朋友。杨炯看不上王勃，但对卢照邻还算是服气。<br><br>
            <span style="color: #95302e; font-weight: bold; font-size: 20px;">盛唐</span>时期，“李杜”算是社交中心，杜甫更是崇拜李白，虽然有些“单相思”。值得关注的是，李白和王维其实是同岁的。<br><br>
            <span style="color: #95302e; font-weight: bold; font-size: 20px;">中唐</span>，韩愈柳宗元相爱相杀，白居易元稹关系甚好，而他们都和刘禹锡是好朋友。元稹和韩愈都很是崇拜老大哥杜甫，白居易则很崇拜小后辈李商隐。<br><br>
            <span style="color: #95302e; font-weight: bold; font-size: 20px;">鼠标悬浮</span>至对应头像，可以<span style="color: #95302e; font-weight: bold; font-size: 20px;">查看详情信息</span>。<span style="color: #95302e; font-weight: bold; font-size: 20px;">双击</span>对应头像，相关关系网络就会<span style="color: #95302e; font-weight: bold; font-size: 20px;">高亮</span>。<span style="color: #95302e; font-weight: bold; font-size: 20px;">双击空白区域</span><span style="color: #95302e; font-weight: bold; font-size: 20px;">复原</span>。<br><br>
        </p>
      </div>
      <div class="flex-3 h100 chart">
        <div ref="chart"></div>
      </div>
    </div>
</template>
<script>
import * as d3 from 'd3';
export default {
  name: 'PopulationRelationshipNetwork',
  data() {
    return {}
  },mounted(){
    this.initChart()
  },
  methods: {
    initChart(){
      const container = this.$refs.chartContainer;

    }
  }
}
</script>
<style lang="scss" scoped>
.chart {
  border-left: 2px solid #95302e;
  min-width: 300px;
}
</style>